<template>
  <div class="add_rotation">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i></i>
        <h2>返回</h2>
      </div>
      <el-form ref="form" :model="form" label-width="100px">
        <h1>轮播图管理</h1>
        <el-form-item label="分类:">
          <div class="block">
            <el-cascader
              v-model="form.value"
              :options="options"
              @change="handleChange"
              placeholder="点击选择分类"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="分布位置:">
          <el-select v-model="form.region" placeholder="轮播图"></el-select>
        </el-form-item>
        <el-form-item label="发布地址:">
          <el-select v-model="form.region" placeholder="url"></el-select>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="创建者:">
          <el-input v-model="form.user"></el-input>
        </el-form-item>
        <el-button @click="handleSave">保存</el-button>
      </el-form>
    </el-card>
    <!-- 模态框 -->

    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="true"
      width="721px"
      :before-close="handleClose"
    >
      <img src="../assets/img/success.png" alt />
      <p>
        <i>代码编辑器</i>软件
        <br />已经位于轮播图中
      </p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模态框
      dialogVisible: false,
      form: {
        value: [],
        name: "1",
        user: "user"
      },
      token: this.$route.query.token,

      options: [
        {
          value: "yingyong",
          label: "应用",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "chajian",
          label: "插件",
          children: [
            {
              value: "shejiyuanze",
              label: "PS插件",
              children: [
                {
                  value: "yizhi",
                  label: "PS渐变"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "ps笔刷"
                },
                {
                  value: "kekong",
                  label: "ps样式"
                }
              ]
            },
            {
              value: "daohang",
              label: "fcpx插件",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "标题字幕"
                },
                {
                  value: "dingbudaohang",
                  label: "转场过度"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 点击保存
    handleSave() {
      this.dialogVisible = true;
    },
    // 级联选择器发生变化时
    handleChange(value) {
      console.log(value);
      this.$router.push({
        path: "/select_software",
        query: { token: this.token }
      })
    }
  }
};
</script>




<style scoped>
                                        
.clearfix {
  position: relative;
  margin-top: 10px;
  margin-bottom: 6px;
}
.add_rotation .clearfix i {
  display: block;
  position: absolute;
  top: 9px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url()
    no-repeat;
  background-size: 10px 20px;
  /* vertical-align: middle; */
  margin-left: 50px;
}
.add_rotation h2 {
  margin: 0;
  font-size: 20px;
  display: inline;
  margin-left: 72px;
  color: #3f51b5;
}
.el-form {
  margin-left: 76px;
}
h1 {
  margin-bottom: 20px;
  margin-left: 0;
  padding-left: 14px;
  border-left: 4px solid #3f51b5;
  font-size: 20px;
  color: #212121;
}
.el-form .el-button {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;

  font-size: 24px;
  color: #ffffff;
}
.el-dialog {
  height: 453px;
  position: relative;
}
.el-dialog img {
  width: 100%;
  height: 100%;
}
.el-dialog p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20%;
  margin-top: -5%;
}
p {
  font-size: 24px;
  text-align: center;
  color: #212121;
}
p i {
  color: #ff3c00;
}
</style>